<template>
    <div>
        <!-- 使用 Element Plus 的标签页组件实现登录与注册申请的切换功能 -->
        <el-tabs v-model="activeTab">
            <!-- 登录标签页 -->
            <el-tab-pane label="登录" name="login">
                <h2 class="login-title">学校管理员登录</h2>
                <!-- 登录表单 -->
                <el-form 
                    :model="loginForm" 
                    label-width="100px"
                    :rules="loginRules"
                    ref="loginFormRef"
                >
                    <!-- 账号输入项 -->
                    <el-form-item label="账号" prop="number">
                        <el-input 
                            v-model="loginForm.number" 
                            placeholder="请输入账号"
                            clearable
                        />
                    </el-form-item>
                    <!-- 密码输入项 -->
                    <el-form-item label="密码" prop="password">
                        <el-input 
                            v-model="loginForm.password" 
                            type="password" 
                            placeholder="请输入密码"
                            show-password
                        />
                    </el-form-item>
                    <!-- 登录按钮 -->
                    <el-form-item>
                        <el-button 
                            type="primary" 
                            @click="handleLogin"
                            :loading="loginStore.loginLoading"
                        >
                            登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <!-- 注册申请标签页 -->
            <el-tab-pane label="申请" name="register">
                <h2 class="login-title">注册申请</h2>
                <!-- 注册申请表单 -->
                <el-form 
                    :model="registerForm" 
                    label-width="100px"
                    :rules="registerRules"
                    ref="registerFormRef"
                >
                <!-- 管理员账号输入项 -->
                <el-form-item label="管理员账号" prop="number">
                    <el-input 
                        v-model="registerForm.number" 
                        placeholder="请设置管理员账号"
                        clearable
                    />
                </el-form-item>
                <!-- 密码输入项 -->
                <el-form-item label="密码" prop="password">
                    <el-input 
                        v-model="registerForm.password" 
                        type="password" 
                        placeholder="设置密码"
                        show-password
                    />
                </el-form-item>
                <!-- 确认密码输入项 -->
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input 
                        v-model="registerForm.confirmPassword" 
                        type="password" 
                        placeholder="请再次输入密码"
                        show-password
                    />
                </el-form-item>
                    <!-- 学校名称输入项 -->
                    <el-form-item label="学校名称" prop="realName">
                        <el-input 
                            v-model="registerForm.realName" 
                            placeholder="请输入学校全称"
                            clearable
                        />
                    </el-form-item>
                    <!-- 联系电话输入项 -->
                    <el-form-item label="联系电话" prop="mobile">
                        <el-input 
                            v-model="registerForm.mobile" 
                            placeholder="请输入联系电话"
                            clearable
                        />
                    </el-form-item>
                    <!-- 所在地区选择项 -->
                    <el-form-item label="所在地区" prop="region">
                        <el-cascader 
                            v-model="registerForm.region" 
                            :options="regionData" 
                            :props="{ value:'value', label: 'label', children: 'children' }"
                            placeholder="请选择地区"
                            style="width: 100%" 
                        />
                    </el-form-item>
                    <!-- 详细地址输入项 -->
                    <el-form-item label="详细地址" prop="detailAddress">
                        <el-input 
                            v-model="registerForm.detailAddress" 
                            placeholder="请输入详细地址"
                            clearable
                        />
                    </el-form-item>
                    <!-- 提交申请按钮 -->
                    <el-form-item>
                        <el-button 
                            type="primary" 
                            @click="handleRegister"
                            :loading="loading"
                        >
                            提交申请
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useLoginStore } from '../../stores/index.js';
import { regionData, codeToText } from 'element-china-area-data';
import { schoolRegister } from '../../api/login/login.js'

// 获取路由实例用于页面跳转
const router = useRouter();

// 当前激活的标签页名称（login 或 register）
const activeTab = ref('login');

// 登录表单引用，用于触发验证和提交操作
const loginFormRef = ref();

// 注册表单引用，用于触发验证和提交操作
const registerFormRef = ref();

// 获取登录状态管理实例
const loginStore = useLoginStore();

// 控制注册按钮加载状态
const loading = ref(false);

/**
 * 登录表单数据模型
 * 包含用户名、密码及登录类型字段
 */
const loginForm = reactive({
    number: '',
    password: '',
    loginType: 'school'  // 指定登录类型为学校管理员
});

/**
 * 注册申请表单数据模型
 * 包括学校名称、所在地区、联系人信息以及管理员账号密码等字段
 */
const registerForm = reactive({
    number: '',
    password: '',
    confirmPassword: '',
    region: [],
    realName: '',
    mobile: '',
    detailAddress: '',
    loginType: 'school',
});

/**
 * 登录表单验证规则定义
 * 对用户名和密码进行必填和长度限制校验
 */
const loginRules = {
    number: [
        { required: true, message: '请输入学校账号', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
};

/**
 * 注册申请表单验证规则定义
 * 对所有字段进行必填、格式和一致性校验
 */
const registerRules = {
    number: [
        { required: true, message: '请输入管理员账号', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== registerForm.password) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            },
            trigger: 'blur'
        }
    ],
    realName: [
        { required: true, message: '请输入学校名称', trigger: 'blur' }
    ],
    mobile: [
        { required: true, message: '请输入联系电话', trigger: 'blur' }
    ],
    region: [
        { required: true, message: '请选择所在地区', trigger: 'change' }
    ],
    detailAddress: [
        { required: true, message: '请输入详细地址', trigger: 'blur' }
    ],
};

/**
 * 处理用户登录逻辑
 * - 验证表单有效性
 * - 调用登录接口
 * - 根据角色跳转至对应主页
 * @returns {Promise<void>}
 */
const handleLogin = async () => {
    try {
        // 表单验证
        await loginFormRef.value.validate();
        
        // 调用Pinia的登录方法
        const res = await loginStore.postLogin(loginForm);
        
        // 登录成功后跳转
        if (res.code === 200) {
            router.push('/school/home');
        }
    } catch (error) {
        console.log('登录失败:', error);
    }
};

/**
 * 处理注册申请提交逻辑
 * - 验证表单有效性
 * - 模拟异步请求处理
 * - 成功后提示并切换回登录页
 * @returns {Promise<void>}
 */
const handleRegister = async () => {
    try {
        // 表单验证
        await registerFormRef.value.validate();
        
        // 检查地区是否选择完整
        if (registerForm.region.length !== 3) {
            ElMessage.error('请选择完整的省市区信息');
            return;
        }
        
        loading.value = true;
        
        // 准备提交参数
        const params = {
            number: registerForm.number,
            password: registerForm.password,
            districtCode: registerForm.region[2],
            realName: registerForm.realName,
            mobile: registerForm.mobile,
            province: codeToText[registerForm.region[0]],
            city: codeToText[registerForm.region[1]],
            district: codeToText[registerForm.region[2]],
            detailAddress: registerForm.detailAddress,
            loginType: 'school'
        };
        
        const res = await schoolRegister(params);
        
        if (res.code === 200) {
            ElMessage.success('注册申请提交成功，请等待审核');
            activeTab.value = 'login';
            
            // 清空注册表单
            Object.assign(registerForm, {
                number: '',
                password: '',
                confirmPassword: '',
                region: [],
                realName: '',
                mobile: '',
                detailAddress: ''
            });
            
            registerFormRef.value.resetFields();
        } else {
            ElMessage.error(res.message || '注册申请失败');
        }
    } catch (error) {
        console.log('表单验证失败:', error);
        if (error.errors) {
            ElMessage.error('请完善表单信息');
        }
    } finally {
        loading.value = false;
    }
};
</script>

<style scoped>
@import '../../styles/login_styles.css';
</style>